<template>
    <div class="write_message_account">
        <!--卖家保险服务规定-->
        <div class="axm-role" v-if="showAxmRole">
            <div class="dialog_cover" style="z-index: 100" @touchmove.prevent @click.prevent="showAxmRole=false"></div>
            <div class="phlog" style="z-index: 111">
                <div class="pgbis" @touchmove.preven @click.prevent="showAxmRole=false">
                    <h2 class="f30 color-000">卖家保险服务规定</h2>
                    <p class="f28">
                        卖家保险，全称为网络游戏卖家出售财产损失保险，是由卖家承担保险费，买家免费享受商品交易成功后被找回、封号等风险赔付的一种保险产品, 如果出现被卖家找回、被运营商收回、封号等情况， 买家可以申请卖家保险服务，卖家保险体系会帮您优先找回或者给予您经济赔偿。如遇出售找回情况，按违规的情节和程度，对违规用户直接作出删除商品信息，限制交易权限甚至冻结用户帐号的处罚，情节严重者本网站保留追究该用户法律责任的权利。</p>
                </div>
            </div>
        </div>
        <!--移动端帐号收费标准：-->
        <div class="axm-role" v-if="showSellRole">
            <div class="dialog_cover" style="z-index: 100" @touchmove.prevent @click.prevent="showSellRole=false"></div>
            <div class="phlog" style="z-index: 111" @touchmove.preven @click.prevent="showSellRole=false">
                <div class="ts-rate">
                    <h3 class="f30 color-000" style="height:auto;">手游帐号收费标准:</h3>
                    <p style="margin-bottom: .14rem;line-height: 1.2;">
                        30元及以下订单，收取8元；30元以上订单，服务费计算时，全部进位取整计算。如：交易金额为101元，则进位成200，按200元进行计算；交易金额为1056元，则进位为1100，按1100元计算。交易佣金封顶1000元。
                    </p>
                    <table>
                        <thead>
                        <tr>
                            <th class="t1">交易金额</th>
                            <th>物品名</th>
                            <th>手续费</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="t1">30以下</td>
                            <td>手游帐号</td>
                            <td>8</td>
                        </tr>
                        <tr>
                            <td class="t1">30~100</td>
                            <td>手游帐号</td>
                            <td>15</td>
                        </tr>
                        <tr>
                            <td class="t1">101~200</td>
                            <td>手游帐号</td>
                            <td>25</td>
                        </tr>
                        <tr>
                            <td class="t1">201~300</td>
                            <td>手游帐号</td>
                            <td>35</td>
                        </tr>
                        <tr>
                            <td class="t1">301~400</td>
                            <td>手游帐号</td>
                            <td>45</td>
                        </tr>
                        <tr>
                            <td class="t1">401~500</td>
                            <td>手游帐号</td>
                            <td>55</td>
                        </tr>
                        <tr>
                            <td class="t1">............</td>
                            <td>手游帐号</td>
                            <td>.........</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="order-container bg-fff f30 color-000 mt-20 border-bottom border-top">
            <span class="span-icon-xinhao">商品标题</span>
            <input maxlength='20' type="text" placeholder="请勿留下联系方式" v-model.trim="accountClass.title">
        </div>
        <!--提示-->
        <div class="contaner-qq fw border-bottom" v-if="accountClass.title.length===0 && showHint">
            <p class="f24">请输入商品标题</p>
        </div>
        <div class="order-container bg-fff f30 color-000 border-bottom">
            <span class="span-icon-xinhao">出售价格</span>
            <v-input
               inputType="tel"
               :saveSmallNum="2"
               :maxlength="7"
               inputPlaceholder="请输入出售价格"
               @writing="writing.price = true"
               v-model.trim="accountClass.price"></v-input>
        </div>
        <div class="contaner-qq fw border-bottom"
             v-if=" (accountClass.price.length===0 || Number(accountClass.price) < MIN_PRICE) && writing.price">
            <p class="f24">出售价格必须大于{{MIN_PRICE}}元</p>
        </div>
        <!--商品出售价格提示-->
        <div class="pt-10 pb-10 f26 p-20 clearfix" v-if="accountClass.price">
            <span class="">所需平台服务费：<span class="color-m1">{{serviceCharge}}元</span></span>
            <span class="fr color-06c" @click="showSellRole=true">了解收费标准</span>
        </div>
        <div v-else class="mt-20"></div>
        <div v-for="property in propertyArr">
            <div class="pt-10 pb-10 f26 p-20 clearfix" v-if="property.fixedFirst">
                <span class="color-m1">信息越完整，售出越快</span>
            </div>
            <div class="pt-10 pb-10 f26 p-20 clearfix" v-if="property.verifyFirst">
                <span class="color-m1"></span>
            </div>
            <div class="order-container bg-fff f30 color-000 border-top">
                <!-- 单选 -->
                <div
                   v-if="property.controlType === TYPE.RADIO"
                   @click="chooseClick(property)">
                    <span :class="{'span-icon-xinhao': property.isRequired}">{{property.propertyName}}</span>
                    <span class=" danwei ">{{property.showValue.length ? property.showValue : '请选择'}}</span>
                    <i class="toRight fr"></i>
                </div>
                <!-- 多选 -->
                <div
                   v-else-if="property.controlType === TYPE.MULTIPLE"
                   @click="chooseClick(property)">
                    <span :class="{'span-icon-xinhao': property.isRequired}">{{property.propertyName}}</span>
                    <span class=" danwei ">{{property.showValue.length ? property.showValue : '请选择（多选）'}}</span>
                    <i class="toRight fr"></i>
                </div>
                <!-- 多行文本 -->
                <div
                   v-else-if="property.controlType === TYPE.TEXTAREA">
                    <span :class="{'span-icon-xinhao': property.isRequired}" class="textarea">{{property.propertyName}}</span>
                    <textarea :maxlength="property.inputLen" v-model.trim="property.inputText" :placeholder="'请输入' + property.propertyName"></textarea>
                </div>
                <!-- 文字，单行 -->
                <div
                   v-else-if="property.controlType === TYPE.TEXT || property.controlType === TYPE.PASSWORD">
                    <span :class="{'span-icon-xinhao': property.isRequired}">{{property.propertyName}}</span>
                    <input :maxlength="property.inputLen" :placeholder="'请输入' + property.propertyName" v-model.trim="property.inputText">
                </div>
                <!-- 数字 -->
                <div
                   v-else-if="property.controlType === TYPE.NUMBER">
                    <span :class="{'span-icon-xinhao': property.isRequired}">{{property.propertyName}}</span>
                    <v-input
                       @change="changeValue(property)"
                       inputClass=""
                       inputType="tel"
                       :inputPlaceholder="'请输入' + property.propertyName"
                       @writing="property.hint = true"
                       v-model="property.inputNum"></v-input>
                </div>
            </div>
            <div v-if="property.isRequired">
                <!--提示 单选和多选-->
                <div class="contaner-qq fw border-bottom"
                     v-if="property.showValue.length===0 && showHint && (property.controlType === TYPE.RADIO || property.controlType === TYPE.MULTIPLE)">
                    <p class="f24">请选择或填写{{property.propertyName}}</p>
                </div>
                <!--提示 多行文本、单行文本和密码类型 -->
                <div class="contaner-qq fw border-bottom"
                     v-if="property.inputText.length===0 && showHint && (property.controlType === TYPE.TEXT || property.controlType === TYPE.PASSWORD || property.controlType === TYPE.TEXTAREA)">
                    <p class="f24">请选择或填写{{property.propertyName}}</p>
                </div>
                <!--提示 数值类型-->
                <div class="contaner-qq fw border-bottom"
                     v-if="property.inputNum.length===0 && (showHint || property.hint) && property.controlType === TYPE.NUMBER">
                    <p class="f24">请选择或填写{{property.propertyName}}</p>
                </div>
            </div>
            <div>
                <!--提示 数值类型-->
                <div class="contaner-qq fw border-bottom"
                     v-if="property.inputNum.length > 0 && property.controlType === TYPE.NUMBER
           && (Number(property.inputNum) > property.scope.maxValue || Number(property.inputNum) < property.scope.minValue)">
                    <p class="f24">请输入 最大{{property.scope.maxValue}} 最小{{property.scope.minValue}}</p>
                </div>
                <!--提示 验证类型-->
                <div class="contaner-qq fw border-bottom"
                     v-if="property.verify && property.regex && property.inputText.length!==0 && showHint && property.controlType === TYPE.TEXT && !checkRegex(property.regex, property.inputText)">
                    <p class="f24">请输入正确格式的{{property.propertyName}}</p>
            </div>
        </div>
            </div>
        <p class="sec-tip mt-20 mb-20">本站所有信息经过安全加密，请安心填写</p>
        <div class="order-container color-000 bg-fff border-bottom" v-if="sellerSafeConfigModel && sellerSafeConfigModel.sellerSafeSwitch != 1">
            <span class="f32 sec-buy-server">开通卖家保险服务<i class="wenhao1 mt-10" style="left:40%; top:0.25rem" @click="showAxmRole=true"></i></span>
            <div class="sec-buy mt-20 f30">
                <span class="sec-price gray" v-if="!accountClass.axm">￥0</span>
                <span class="sec-price" v-if="accountClass.axm">￥{{axmPrice}}</span>
                <div class="fr" @click="accountClass.axm=false" v-if="sellerSafeConfigModel.sellerSafeSwitch != 3">
                    <i class="chrd-inp " :class="{selected: accountClass.axm !== null && !accountClass.axm}"></i>
                    <span class="span-kt">不开通</span>
                </div>
                <div class="fr" @click="accountClass.axm=true" v-if="sellerSafeConfigModel.sellerSafeSwitch != 3">
                    <i class="chrd-inp" :class="{selected: accountClass.axm !== null && accountClass.axm}"></i>
                    <span class="span-kt">开通</span>
                </div>
            </div>
            <div class="sec-text mt-20 color-999">
                <p class="f22" v-if="sellerSafeConfigModel.sellerSafeSwitch != 3"><i class="p-icon-red-tip fl"></i>用户更愿意购买开通卖家保险服务的商品！(卖出后收费)</p>
                <p class="f22" v-else><i class="p-icon-red-tip fl"></i>本商品默认开启卖家保险，买家购买更放心。保险费用将在商品交易完成后从交易金额中扣除。</p>
            </div>
        </div>
        <!--提示-->
        <div class="contaner-qq fw border-bottom" v-if="sellerSafeConfigModel && sellerSafeConfigModel.sellerSafeSwitch != 1 && accountClass.axm === null && showHint">
            <p class="f24">请选择是否开通卖家保险</p>
        </div>
    </div>
</template>

<script>
  import inputCom from './input.vue'

  /**
   * 填写动态属性信息
   * controlType 1单选框 2 多选框 3 文字 4 数字
   */
  export default {
    components: {
      'v-input': inputCom
    },
    props: [
      'TYPE',
      'writing',
      'accountClass',
      'showHint',
      'propertyArr',
      'sellerSafeConfigModel',
      'MIN_PRICE',
      'serviceCharge'
    ],
    data() {
      return {
        showSellRole: false, // 是否显示收费标准规则
        showAxmRole: false // 是否显示安心买服务规则
      }
    },
    computed: {
      axmPrice() {
        if (!this.sellerSafeConfigModel && !this.sellerSafeConfigModel.sellerSafeRate) // 无服务时或者安心买配置没有响应前，值为0
          return 0
        if (!Number(this.accountClass.price)) return 0 // 没有输入价格，值为0
        let p = Number(this.accountClass.price) * this.sellerSafeConfigModel.sellerSafeRate
        if (p > this.sellerSafeConfigModel.sellerSafeUpperLimit) p = this.sellerSafeConfigModel.sellerSafeUpperLimit
        if (p < this.sellerSafeConfigModel.sellerSafeLowerLimit) p = this.sellerSafeConfigModel.sellerSafeLowerLimit
        return Math.ceil(p * 100) / 100
      }
    },
    methods: {
      checkRegex(regex, text) {
        return new RegExp(regex).test(text)
      },
      changeValue(item) {
        //console.log('数值发生改变')
      },
      /* 多选和单选点击 */
      chooseClick(property) {
        this.$emit('changePropertyChoose', property)
      }
    }
  }
</script>

<style scoped>
    .write_message_account .span-icon-xinhao.textarea {
        min-height: 2.1rem;
        background: url(/dist/icon-red.png?fd047fe…) no-repeat left .26rem;
        background-size: 0.14rem 0.14rem;
    }
    .span-icon-xinhao {
        margin-left: -.2rem;
    }

    .gray {
        color: gray !important;
    }

    .axm-role {
        position: fixed;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        top: 0;
        z-index: 1000;
    }

</style>